<!--左边下拉导航栏-->
<template>
  <div id="left" style="height: 100%">
    <el-menu
      active-text-color="#409EFF"
      text-color="#000"
      :default-active="this.$route.path"
      @open="handleOpen"
      @close="handleClose"
      :collapse="flag"
      class='menu'
      menu-trigger="click" router unique-opened :collapse-transition="false">
      <el-submenu v-for="(item,index) in menu" :index='item.index' :key="index">
        <template slot="title">
          <div class="left-width">
<!--            <i class="iconfont" :class="item.icon"></i>-->
            <span slot="title" class="title">{{item.title}}</span>
          </div>
        </template>
        <el-menu-item-group class='group' v-for="(list,index1) in item.content" :key="index1">
          <el-menu-item @click="handleTitle(item.index)" :index="list.path" v-if="list.item1 != null">{{list.item1}}</el-menu-item>
          <el-menu-item @click="handleTitle(item.index)" :index="list.path" v-if="list.item2 != null">{{list.item2}}</el-menu-item>
          <el-menu-item @click="handleTitle(item.index)" :index="list.path" v-if="list.item3 != null">{{list.item3}}</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
import store from '@/vuex/store'
import {mapState} from 'vuex'
export default {
  name: "mainLeft",
  data() {
    return {

    }
  },
  computed: mapState(["flag","menu"]),
  created() {
    // this.addData()
  },
  methods: {
    handleOpen(key, keyPath) {
      // console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      // console.log(key, keyPath);
    },
    //点击标题传递参数给navigator组件
    handleTitle(index) {
      this.bus.$emit('sendIndex',index)
    },
    // addData() {
    //   let role = this.$cookies.get("role")
    //   if(role == 0) {
    //     this.menu.push(
    //       {
    //       index: '5',
    //       title: '教师管理',
    //       icon: 'icon-Userselect',
    //       content:[{item1:'教师管理',path:'/teacherManage'},{item2: '添加教师',path: '/addTeacher'}],
    //     })
    //   }
    // }
  },
  store
}
</script>

<style>
.el-menu-vertical-demo .el-submenu__title {
  overflow: hidden;
}

.left-width {
  width: 213px;
  text-align: center;
  font-weight: bold;
  color: #5f5f5f;
  font-size: 16px;
}

.left-width .iconfont {
  font-size: 18px;
  color: #fff;
}

#left {
  height: 100%;
  background: none;
  z-index: 0;
}
#left .el-menu-vertical-demo .title {
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  margin-left: 14px;
}
.menu {
  background: none;
}
.el-submenu__title i {
    color: #fbfbfc !important;
}

.el-menu {
  background: none;
  text-align: center;
  border: none;
}
</style>
